<template>
  <div>
    <!-- <div class="mask" v-show="isShow"></div> -->
    <!-- <van-overlay :show="isShow" @click="isShow = false" /> -->
    <van-popup v-model="firstShow" position="bottom" :style="{ height: 'auto' }">
      <div class="first_header">{{firstTitle}}</div>
      <ul class="first_content" >
        <li v-for="(item, index) in applyType" :key="index" @click="typeClick(index)">
          <img v-lazy="item.img" alt="">
          <div>{{item.name}}</div>
        </li>
      </ul>
      <div class="first_close" @click="firstShow = false">关闭</div>
    </van-popup>
    <van-popup v-model="isShow" position="bottom" :style="{ height: '13.786667rem' }" >
      <div class="title-nav-bar">
        <div class="nav-icon" @click="closeClick">
          <img src="../../../assets/img/navbar/ic_back_left.png" alt="" />
        </div>
        <div class="nav-title">{{isTitle}}</div>
        <div class="nav-btn"></div>
      </div>
      <div class="content">
        <div class="content-title">你当前选择的储值方式：</div>
        <div class="longtimer">
          <span class="longtimer_icon_img" :style="{'backgroundPosition': '0 -' + .8 * isIndex + 'rem'}" v-if="showIcon"></span>
          <span v-else class="longtimer_img">
            <img v-lazy="firstImg" alt="">
          </span>
          <div>{{isTitle}}</div>
        </div>
        <div class="face-title">
          <div class="face-value">选择储值面额：</div>
          <div class="face-money">
            <span>{{isValue || 0}}</span>
            {{goldList[currentIndex].type}}=
            <span>{{isValue || 0}}</span>代币
          </div>
        </div>
        <ul class="tab-control">
          <li v-for="(item, index) in goldList" :key="index" :class="[currentIndex == index ? 'tab-control-active' : '']" @click="itemClick(index)">
            <div class="tab-control-money" :class="[currentIndex == index ? 'tab-item-active' : '']">{{item.money}}</div>
            <div class="tab-control-type" :class="[currentIndex == index ? 'tab-item-active' : '']">{{currencyCode}}</div>
          </li>
        </ul>
        <input 
            type="number" 
            pattern="[0-9]*" 
            name="num" 
            id="num" 
            class="input" 
            placeholder="自定义金额" 
            :class="[inputBorder ? 'tab-control-active' : '']" @click="inputClick" 
            v-model="inputValue" 
            @input="print($event.target.value)" 
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))">
        <div class="apply-money">
          <div class="apply-money-item">付款金额：</div>
          <div class="apply-money-data">{{isValue || 0}}CNY</div>
        </div>
        <div class="apply-btn">确认付款</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import bus from '../../../assets/js/eventBus'

export default {
  props: {
    storedList: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      currentIndex: 4,
      isIndex: null,
      isShow: false,
      firstShow: false,
      firstTitle: '',
      firstImg: '',
      isTitle: '',
      goldList: [
        {type: 'CNY',money:10},{type: 'CNY',money:20},
        {type: 'CNY',money:50},{type: 'CNY',money:100},
        {type: 'CNY',money:200},{type: 'CNY',money:500},
        {type: 'CNY',money:1000},{type: 'CNY',money:2000},
      ],
      isValue: '',
      inputBorder: false,
      inputValue: null,
      currencyType: '',
    }
  },
  created() {
    this.getIsValue()
  },
  mounted() {
    bus.$on('sendByBus', (data,index) => {
      if (index !== 2 && index !== 4 && index !== 5) {
        this.isTitle = data
        this.isIndex = index
        this.isShow = true
      }else {
        this.firstTitle = data
        this.isIndex = index
        this.firstShow = true
      }
    })
  },
  computed: {
    applyType() {
      if(this.isIndex == 2) {
        return [{name:'MyCard台湾信用卡3D验证',img:require('../../../assets/img/stored/recharge_type_31.png')},
        {name:'MyCard点数卡',img:require('../../../assets/img/stored/recharge_type_32.png')},
        {name:'MyCard会员扣点',img:require('../../../assets/img/stored/recharge_type_33.png')},
        {name:'MyCard其他支付',img:require('../../../assets/img/stored/recharge_type_35.png')}]
      }else if(this.isIndex == 4) {
        return [{name:'GASH台湾信用卡3D验证',img:require('../../../assets/img/stored/recharge_type_31.png')},
        {name:'GASH点数卡',img:require('../../../assets/img/stored/recharge_type_42.png')},
        {name:'GASH钱包扣点',img:require('../../../assets/img/stored/recharge_type_44.png')},
        {name:'GASH其他支付',img:require('../../../assets/img/stored/recharge_type_46.png')}]
      }else if(this.isIndex == 5) {
        return [{name:'Razer Gold',img:require('../../../assets/img/stored/recharge_type_21.png')},
        {name:'Razer Gold PIN',img:require('../../../assets/img/stored/recharge_type_22.png')},
        {name:'Visa & Master',img:require('../../../assets/img/stored/recharge_type_23.png')}]
      }
    },
    currencyCode() {
      if (this.isIndex == 0 || this.isIndex == 1) {
        return this.currencyType = 'CNY'
      }else if (this.isIndex == 3) {
        return this.currencyType = 'USD'
      }else if (this.isIndex == 2 || this.isIndex == 4) {
        return this.currencyType = 'TWD'
      }else if (this.isIndex == 5) {
        return this.currencyType = 'MYR'
      }
    },
    showIcon() { 
      if(this.isIndex == 2) {
        return false
      }else if (this.isIndex == 4) {
        return false
      }else if (this.isIndex == 5) {
        return false
      }else {
        return true
      }
    },
  },
  methods: {
    closeClick() {
      this.isShow = !this.isShow
      this.currentIndex = 4
      this.inputBorder = false
      this.getIsValue()
    },
    itemClick(index) {
      this.currentIndex = index
      this.getIsValue()
      this.inputValue = null
      this.inputBorder = false
    },
    getIsValue() {
        this.isValue = this.goldList[this.currentIndex].money
    },
    inputClick() {
      // this.currentIndex = 8
      this.isValue = null
      this.inputBorder = true
    },
    print(e) {
      this.isValue = e
    },
    typeClick(index) {
      this.firstShow = false
      this.isShow = true
      this.isTitle = this.applyType[index].name
      this.firstImg = this.applyType[index].img
    }
  },
}
</script>

<style scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
}

/* .dlg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1034px;
  width: 750px;
  background: #fff;
  z-index: 2;
} */

.title-nav-bar {
  width: 100%;
  height: 1.173333rem;
  box-sizing: border-box;
  padding: 0 .426667rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border-bottom: .013333rem solid #CCCCCC;
}

.nav-icon {
  width: .8rem;
}

.nav-icon img {
  width: .56rem;
  height: .56rem;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: .48rem;
  font-weight: 700;
  color: #222222;
}

.nav-btn {
  width: .8rem;
}

.content {
  padding: 0 .426667rem;
}

.content-title {
  font-size: .426667rem;
  font-weight: 700;
  color: #222222;
  line-height: .6rem;
  padding: .28rem 0;
}

.longtimer {
  width: 100%;
  height: 1.333333rem;
  border: .026667rem solid #ff5543;
  border-radius: .2rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-bottom: .8rem;
}

.longtimer_icon_img {
  width: .8rem;
  height: .8rem;
  background: url('../../../assets/img/stored/type_icon.png') no-repeat;
  background-size: .8rem 6.4rem;
  margin-right: .266667rem;
  margin-left: .266667rem;
}

.longtimer_img {
  width: .8rem;
  height: .68rem;
  margin-right: .266667rem;
  margin-left: .266667rem;
}

.longtimer_img img {
  width: .8rem;
  height: .68rem;
}

.longtimer div {
  font-size: .4rem;
  font-weight: 400;
  color: #222222;
}

.face-title {
  font-size: .426667rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.face-value {
  font-weight: 700;
  color: #222222;
}

.face-money {
  font-weight: 400;
  color: #222222;
}

.face-money span {
  font-weight: 400;
  color: #ff5543;
}

.tab-control {
  box-sizing: border-box;
  margin: .266667rem 0 ;
  width: 100%;
  height: 2.933333rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}

.tab-control li {
  box-sizing: border-box;
  width: 2.106667rem;
  height: 1.333333rem;
  border: .026667rem solid #c1c1c1;
  border-radius: .213333rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tab-control-money {
  font-size: .506667rem;
  font-weight: 800;
  color: #777777;
}

.tab-control-type {
  font-size: .373333rem;
  font-weight: 800;
  color: #c1c1c1;
}

.tab-control-active {
  border: .026667rem solid #ff5543!important;
}

.tab-item-active {
  color: #ff5543;
}

.input {
  box-sizing: border-box;
  outline: none;
  width: 100%;
  height: 1.333333rem;
  border-radius: .213333rem;
  border: .026667rem solid #c1c1c1;
  font-size: .426667rem;
  font-weight: 400;
  text-align: center;
  color: #c1c1c1;
}

.apply-money {
  display: flex;
  justify-content: space-between;
  margin: .306667rem 0 .826667rem 0 ;
}

.apply-money-item {
  font-size: .426667rem;
  font-weight: 700;
  color: #222222;
}

.apply-money-data {
  font-size: .48rem;
  font-weight: 700;
  color: #ff5543;
}

.apply-btn {
  width: 9.146667rem;
  height: 1.333333rem;
  background: #ff5543;
  border-radius: .186667rem;
  font-size: .426667rem;
  font-weight: 400;
  text-align: center;
  line-height: 1.333333rem;
  color: #ffffff;
}

.van-popup {
  border-radius: .533333rem .533333rem 0 0;
  background: #F5F5F5;
}

.first_header {
  width: 100%;
  height: 1.173333rem;
  background: #ffffff;
  line-height: 1.173333rem;
  text-align: center;
  font-size: .48rem;
  font-weight: 700;
  color: #222222;
  border-bottom: .013333rem solid #cccccc;
}

.first_content {
  box-sizing: border-box;
  padding: 0 .426667rem;
  background: #ffffff;
  margin-bottom: 1.386667rem;
  font-size: .4rem;
  color: #222222;
  display: flex;
  flex-direction: column;
}

.first_content img {
  display: inline-block;
  width: .8rem;
  height: .68rem;
  margin-right: .266667rem;
}

.first_content li {
  width: 100%;
  height: 1.386667rem;
  display: flex;
  align-items: center;
  border-bottom: .013333rem solid #cccccc;
}

.first_content li:last-child {
  border-bottom: 0;
}

.first_close {
  width: 10rem;
  height: 1.44rem;
  background: #ffffff;
  font-size: .426667rem;
  text-align: center;
  line-height: 1.44rem;
  color: #999999;
}
</style>